<template>
  <div class="dialogPage">
    <div class="popBox " @click="popBoxBtn" v-if="popBox">
      <popMask ref="popWrap" @close="popBox = false">
        <div class="popBox1" v-if="popBoxType === 1">
          <div class="popBox11" @click.stop>
            <div class="popBox2Bg">
              <div class="popBox2Bg1">活动规则</div>
            </div>
            <div class="popBox111">
              <p v-for="(item, index) in errMsgArr" :key="index">{{ item }}</p>
            </div>
          </div>
          <img class="popBox12" @click="popBoxBtn" src="./img/a2.png" alt="" />
        </div>
        <div class="popBox2" @click.stop v-if="popBoxType === 2">
          <img width="100%" src="./img/a9.png" alt="" />
          <div class="popBox21">
            <p class="popBox213">恭喜您获得立减金</p>
            <p class="popBox214">
              ￥<span class="popBox2141">{{ errMsg }}</span>
            </p>
            <p class="popBox2142">注:立减金是有有效期的哦，请尽快使用</p>
            <button class="popBox212" @click="popBoxBtn">我知道了</button>
          </div>
        </div>
        <div class="popBox2" @click.stop v-if="popBoxType === 3">
          <div class="popBox2Bg"></div>
          <div class="popBox21">
            <img class="popBox215" src="./img/a11.png" alt="" />
            <!-- <p class="popBox216">领取失败</p> -->
            <p class="popBox211">{{ errMsg }}</p>
          </div>
        </div>
        <div class="popBox2" @click.stop v-if="popBoxType === 4">
          <div class="popBox2Bg"></div>
          <div class="popBox21">
            <img class="popBox215" src="./img/a13.png" alt="" />
            <p class="popBox216">{{ errTime.text }}</p>
            <p class="popBox2111" v-if="errTime.start && errTime.end">请于{{ errTime.start }} ~ {{ errTime.end }}参与活动</p>
          </div>
        </div>
        <div class="popBox2" @click.stop v-if="popBoxType === 5">
          <div class="popBox2Bg"></div>
          <div class="popBox21">
            <img class="popBox215" src="./img/a13.png" alt="" />
            <p class="popBox216">活动太火爆了，请稍后再试</p>
          </div>
        </div>
        <div class="popBox2" @click.stop v-if="popBoxType === 6">
          <div class="popBox2b1">
            <img class="popBox2b2" :src="obj.luckOkImg" alt="" />
            <p class="popBox2b3">{{ obj.luckOkTxt }}</p>
            <div class="popBox2b4">{{ errMsg }}</div>
            <p v-if="obj.awardType == '1'" class="popBox2b5">注:立减金是有有效期的哦，请尽快使用</p>
            <div class="popBox2b6" @click="popBoxBtn">确定</div>
          </div>
        </div>
        <div class="popBox2 popBoxType7" @click.stop v-if="popBoxType === 7">
          <div class="popBox2b1">
            <img class="popBox2b8" :src="obj.luckFailImg" alt="" />
            <div class="popBox2b7">{{ errMsg }}</div>
            <div class="popBox2b6" @click="popBoxBtn">我知道了</div>
          </div>
        </div>
        <div class="popBox2 popBoxType8" @click.stop v-if="popBoxType === 8">
          <div class="popBox2b1">
            <img class="popBox2b8" :src="obj.luckErrImg" alt="" />
            <div class="popBox2b7">{{ errMsg }}</div>
            <div class="popBox2b6" @click="popBoxBtn">我知道了</div>
          </div>
        </div>
        <div class="popBox2" @click.stop v-if="popBoxType === 9">
          <div class="popBox2b1">
            <img class="popBox2b8" :src="obj.luckErrImg" alt="" />
            <div class="popBox2b7 popBox2b7A">{{ errMsg }}</div>
          </div>
        </div>
      </popMask>
    </div>
  </div>
</template>

<script>
import popMask from '../popWrap/index.vue'

export default {
  props: {
    source: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    popMask,
  },
  data() {
    return {
      popBoxTypeUser: 1,
      popBox: false,
      popBoxType: 1,
      popBoxDoor: false,
      errMsg: '',
      errMsgArr: [],
      errTime: {
        start: '',
        end: '',
        text: '',
      },
      timer1: null,
      obj: {
        luckOkTxt: '恭喜啦',
        luckOkImg: require('./img/gold.png'),

        luckFailTxt: '',
        luckFailImg: require('./img/a14.png'),

        luckErrImg: require('./img/a15.png'),
        luckErrTxt: '离奖品就差一点点，加油哦',
        awardType: '1',
      },
    }
  },
  mounted() {
    this.reShow()
  },
  watch: {
    source: {
      handler() {
        this.reShow()
      },
      deep: true,
    },
  },
  methods: {
    reShow() {
      let fixobj = {}
      for (let i in this.source) {
        if (this.source[i] !== '' && this.source[i] !== null && this.source[i] !== undefined) {
          fixobj[i] = this.source[i]
        }
      }

      Object.assign(this.obj, fixobj)
    },
    popBoxBtn() {
      if (this.popBoxDoor) return
      if (this.popBoxType === 4) return
      this.$refs.popWrap.close()
      this.popBoxDoor = false
      if (this.timer1) clearTimeout(this.timer1)
      this.timer1 = setTimeout(() => {
        this.$emit('alertOff', this.popBoxType)
      }, 300)
    },
    popUpMsg(i, j, k = false) {
      this.popBoxType = i
      this.popBox = true
      this.popBoxDoor = k
      this.errMsg = j
      if (i === 1) {
        try {
          this.errMsgArr = this.errMsg && this.errMsg.split(/[\n,↵]/g)
        } catch (error) {
          this.errMsgArr = this.errMsg
        }
        // if (this.timer1) clearTimeout(this.timer1)
        // this.timer1 = setTimeout(() => {
        //   this.popBoxBtn()
        // }, 2000)
      } else if (i === 4) {
        this.errTime = j
      } else if (i === 7) {
        this.errMsg = j
        if (this.obj.luckFailTxt) {
          this.errMsg = this.obj.luckFailTxt
        }
      } else if (i === 8) {
        this.errMsg = j
        if (this.obj.luckErrTxt) {
          this.errMsg = this.obj.luckErrTxt
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.dialogPage {
  .popBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    .popBox1 {
      .popBox11 {
        width: 610rpx;
        position: relative;
        .popBox2Bg {
          height: 580rpx;
          background: #fff;
          border-radius: 16rpx;
          border: 10rpx solid var(--main-color);
          .popBox2Bg1 {
            width: 226rpx;
            height: 66rpx;
            line-height: 66rpx;
            margin: 0 auto;
            background: var(--main-color);
            border-radius: 8rpx;
            font-size: 32rpx;
            text-align: center;
            transform: translateY(-10rpx);
            color: #fff;
          }
        }
        .popBox111 {
          position: absolute;
          width: 500rpx;
          top: 100rpx;
          left: 55rpx;
          font-size: 32rpx;
          color: #333;
          line-height: 44rpx;
          height: 460rpx;
          overflow: hidden;
          overflow-y: auto;
        }
      }
      .popBox12 {
        width: 44rpx;
        height: 44rpx;
        display: block;
        margin: 0 auto;
        transform: translateY(50rpx);
      }
    }
    .popBox2 {
      width: 610rpx;
      position: relative;
      .popBox2Bg {
        height: 580rpx;
        background: #fff;
        border-radius: 16rpx;
        border: 10rpx solid var(--main-color);
      }
      .popBox21 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
      }
      .popBox2b1 {
        background: #fff;
        border-radius: 16rpx;
        width: 600rpx;
        border: 10rpx solid var(--main-color);
        text-align: center;
      }
      .popBox2b2 {
        max-width: 380rpx;
        max-height: 214rpx;
        margin-top: 69rpx;
      }
      .popBox2b3 {
        margin-top: 30rpx;
        font-size: 50rpx;
        line-height: 69rpx;
        font-weight: bold;
        color: #8c6700;
      }
      .popBox2b4 {
        margin-top: 14rpx;
        font-size: 32rpx;
        line-height: 32rpx;
        color: #8c6700;
      }
      .popBox2b5 {
        color: rgba(140, 103, 0, 0.5);
        font-size: 28rpx;
        line-height: 28rpx;
        margin-top: 34rpx;
      }
      .popBox2b6 {
        margin: 50rpx auto 70rpx;
        width: 470rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: var(--main-color);
        font-size: 36rpx;
        border-radius: 40rpx;
        color: #fff;
      }
      .popBox2b7 {
        font-size: 28rpx;
        line-height: 28rpx;
        margin-top: 30rpx;
        color: rgba(140, 103, 0, 1);
      }
      .popBox2b7A {
        padding-bottom: 70rpx;
        font-size: 40rpx;
        line-height: 40rpx;
        color: var(--main-color);
      }
      .popBox2b8 {
        width: 120rpx;
        height: 120rpx;
        margin-top: 70rpx;
      }
      .popBox211 {
        color: #898b8d;
        font-size: 32rpx;
        line-height: 42rpx;
      }
      .popBox2111 {
        color: #898b8d;
        font-size: 24rpx;
        line-height: 42rpx;
      }
      .popBox212 {
        border-radius: 98rpx;
        height: 98rpx;
        line-height: 98rpx;
        font-size: 32rpx;
        color: #ff1f30;
        background: linear-gradient(180deg, #ffecd4, #ffda93);
        width: 528rpx;
        margin: 0 auto;
      }
      .popBox213 {
        font-size: 32rpx;
        line-height: 44rpx;
        margin-top: 78rpx;
        margin-bottom: 13rpx;
        color: #bf7238;
      }
      .popBox214 {
        color: #ff1f30;
        font-size: 32rpx;
        line-height: 44rpx;
        .popBox2141 {
          font-size: 50rpx;
          line-height: 60rpx;
          font-weight: bold;
        }
      }
      .popBox2142 {
        color: #d4d4d4;
        font-size: 24rpx;
        margin-bottom: 181rpx;
      }
      .popBox215 {
        width: 120rpx;
        height: 120rpx;
        margin-top: 141rpx;
        margin-bottom: 70rpx;
      }
      .popBox216 {
        font-size: 36rpx;
        line-height: 36rpx;
        color: var(--main-color);
        margin-bottom: 29rpx;
      }
    }
  }
}
</style>
